<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>曲线属性</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>

<body>
    <form class="layui-form" action="">

        <div class="layui-form" lay-filter="">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>曲线属性</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">曲线名称：</label>
                <div class="layui-input-inline" style="width:160px">
                    <input type="text" id="curvename" autocomplete="off" readonly class="layui-input">
                </div>
                <div class="layui-input-inline" style="margin-top: 12px;">
                    <span id="curveinfo" style="font-size: 16px;"></span>
                    <input type="text" id="tablename" hidden value="表名">
                    <input type="text" id="parameter" hidden value="字段">
                    <input type="text" id="curveunit" hidden value="曲线单位">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">曲线别名：</label>
                <div class="layui-input-inline" style="width: 160px;">
                    <input type="text" id="curvecn" autocomplete="off" class="layui-input">
                </div>
                <label class="layui-form-label">字体颜色：</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" placeholder="请选择颜色" autocomplete="off" class="layui-input" id="curvecolor">
                </div>
                <div class="layui-inline" style="left: -11px;">
                    <div id="test1"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">字体类型：</label>
                <div class="layui-input-inline" style="width: 160px;">
                    <select id="fontfamily" class="layui-select" lay-search>
                        <option value="Arial">Arial</option>
                        <option value="Arial Rounded MT Bold">Arial Rounded MT Bold</option>
                        <option value="Arial Unicode MS">Arial Unicode MS</option>
                        <option value="华文仿宋">华文仿宋</option>
                        <option value="华文楷体">华文楷体</option>
                        <option value="宋体">宋体</option>
                        <option value="楷体">楷体</option>
                        <option value="隶书">隶书</option>
                        <option value="微软雅黑">微软雅黑</option>
                        <option value="幼圆">幼圆</option>
                    </select>
                </div>
                <label class="layui-form-label">字体大小：</label>
                <div class="layui-input-inline" style="width: 160px;">
                    <input type="text" autocomplete="off" class="layui-input" id="fontsize"
                        onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">小数点位：</label>
                <div class="layui-input-inline" style="width: 160px;">
                    <input type="text" autocomplete="off" class="layui-input" id="pointnum"
                        onKeyUp="this.value=this.value.replace(/[^\.\d]/g,'');this.value=this.value.replace('.','');">
                </div>
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <input type="checkbox" id="isshow" lay-skin="primary" title="显示无效值">
                </div>
            </div>
        </div>

    </form>
    <script type="text/javascript" src="../../jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <script type="text/javascript" src="../../layui/public.js"></script>
    <script type="text/javascript" src="../../index.js"></script>
    <script type='text/javascript'>
        var $;
        var form;
        var colorpicker;
        layui.use(['form', 'colorpicker'], function () {
            $ = layui.$;
            form = layui.form;
            colorpicker = layui.colorpicker;

            //实际数据颜色
            colorpicker.render({
                elem: '#test1'
                , color: $('#curvecolor').val()
                , done: function (color) {
                    $('#curvecolor').val(color);
                }
            });
        });

        //曲线数据返填
        function CurveData(data) {
            $('#curvename').val(data.curvename);
            $('#curvecn').val(data.curvecn);
            $('#tablename').val(data.tablename);
            $('#parameter').val(data.parameter);
            $('#curveunit').val(data.curveunit);
            document.getElementById("curveinfo").innerText = "(" + data.tablename + ":" + data.parameter + ")";
            $('#curvecolor').val(data.curvecolor);
            $('#fontfamily').val(data.fontfamily);
            $('#fontsize').val(data.fontsize);
            $('#pointnum').val(data.pointnum);
            if (data.isshow == true) {
                $('#isshow').prop("checked", true);
            } else {
                $('#isshow').prop("checked", false);
            }

            //实际数据颜色
            colorpicker.render({
                elem: '#test1'
                , color: data.curvecolor
                , done: function (color) {
                    $('#curvecolor').val(color);
                }
            });

            form.render();
        }
    </script>

</body>

</html>